<template>
    <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="onSearch" @reset="onReset"></common-search>
    <a-row justify="space-between">
      <a-col :xl="12" :xxl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="line-chart" ref="rankRef"></div>
      </a-col>
      <a-col :xl="12" :xxl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="line-chart" ref="truckRankRef"></div>
      </a-col>
    </a-row>
  <a-button type="primary" @click="exports" :loading="exportLoading" v-modulePerm="['form:export']">
    <template #icon>
      <ExportOutlined />
    </template>
    明细导出
  </a-button>
    <common-table
        :columns="columns"
        :dataSource="dataList"
        v-model:loading="loading"
        :scroll="{ x: 'max-content', y: 300 }"
    >
    </common-table>

</template>
<script>
export default {
  name:"tail-form"
}
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import { ref, onMounted,watch } from "vue";
import {message} from "ant-design-vue";
import {postFile} from "@utils/service/index.js";
import {getManyDictItems} from "@/api/system/dict.js";
import dayjs from "dayjs";
import {getCrossPage} from "@/api/tail/forms.js";
import {useEcharts} from "@/hooks/echarts/useEcharts.js";
import {getBeforeMonthDate} from "@utils/utils.js";
const rankRef = ref()
const truckRankRef = ref()
let instance
let instance1
const columns = [
  {
    title: "年-周",
    dataIndex: "yearWeek",
    key: "yearWeek",
    align: 'center',
  },
  {
    title: "产品等级",
    dataIndex: "productLevel",
    key: "productLevel",
    align: 'center'
  },
  {
    title: '物流单数',
    dataIndex: 'ordCnt',
    key: 'ordCnt',
    align: 'center'
  },
  {
    title: '跨区单数',
    dataIndex: 'crossZone',
    key: 'crossZone',
    align: 'center'
  },
  {
    title: '跨区占比',
    dataIndex: 'crossRate',
    key: 'crossRate',
    align: 'center'
  },
  {
    title: '卡派单数',
    dataIndex: 'truckCnt',
    key: 'truckCnt',
    align: 'center'
  },
  {
    title: '跨区卡派单数',
    dataIndex: 'crossTruckZone',
    key: 'crossTruckZone',
    align: 'center'
  },
  {
    title: '跨区卡派占比',
    key: 'crossTruckRate',
    dataIndex: 'crossTruckRate',
    align: "center"
  }
];
const formItems = ref([
  {
    label: '站点',
    field: 'site',
    type: 'select',
    multiple: true,
    options: []
  },
  {
    label:'平台',
    field: 'platform',
    type: 'select',
    multiple: true,
    options: []
  },
  {
    label:'发货日期',
    field: 'time',
    type:'rangePicker',
    showTime: false,
  }
]);

const exportLoading = ref(false);
const yearWeekList = ref([]);
const rank = ref([])
const truckRank = ref([])
const { dataList, query, loading, search, reset } = useSearchTable({
  searchAPI: getCrossPage,
  queryFactory: () => {
    return {
      time: getBeforeMonthDate(3),
      site: ['US'],
      platform: ['magento2']
    }
  },
  beforeSearch: () => {
    if(query.value.time){
      query.value.dateShippingBegin = query.value.time[0]
      query.value.dateShippingEnd = query.value.time[1]
    }else{
      delete query.value.dateShippingBegin
      delete query.value.dateShippingEnd
    }
  },
  afterSearch:async () => {
    yearWeekList.value = Array.from(new Set(dataList.value.map(item => item.yearWeek))).reverse()
    let a = []
    let b = []
    let c = []
    let d = []
    a = dataList.value.filter(item => {
      return item.productLevel === 'A'
    }).map(item => item.crossRate)
    b= dataList.value.filter(item => {
      return item.productLevel === 'B'
    }).map(item => item.crossRate)
    c = dataList.value.filter(item => {
      return item.productLevel === 'C'
    }).map(item => item.crossRate)
    d = dataList.value.filter(item => {
      return item.productLevel === 'D'
    }).map(item => item.crossRate)
    rank.value = [
      {
        name:'等级A',
        type:'line',
        data:a.reverse()
      },
      {
        name:'等级B',
        type:'line',
        data:b.reverse()
      },
      {
        name:'等级C',
        type:'line',
        data:c.reverse()
      },
      {
        name:'等级D',
        type:'line',
        data:d.reverse()
      }
    ]
    console.log('rank',rank.value)
    a = dataList.value.filter(item => {
      return item.productLevel === 'A'
    }).map(item => item.crossTruckRate)
    b= dataList.value.filter(item => {
      return item.productLevel === 'B'
    }).map(item => item.crossTruckRate)
    c = dataList.value.filter(item => {
      return item.productLevel === 'C'
    }).map(item => item.crossTruckRate)
    d = dataList.value.filter(item => {
      return item.productLevel === 'D'
    }).map(item => item.crossTruckRate)
    truckRank.value = [
      {
        name:'等级A',
        type:'line',
        data:a.reverse()
      },
      {
        name:'等级B',
        type:'line',
        data:b.reverse()
      },
      {
        name:'等级C',
        type:'line',
        data:c.reverse()
      },
      {
        name:'等级D',
        type:'line',
        data:d.reverse()
      }
    ]
    const { initChart:rankInitChart, } = useEcharts(instance,rankRef, change(rank.value,'整体跨区占比趋势'))
    const { initChart:truckRankInitChart } = useEcharts(instance1,truckRankRef, change(truckRank.value,'卡派跨区占比趋势'))
    outerRankInitChart.value = rankInitChart
    outerTruckRankInitChart.value = truckRankInitChart
  }
});
const outerRankInitChart = () => {

}
const outerTruckRankInitChart = () => {

}
const exports = async () => {
  try{
    exportLoading.value = true;
    let obj = query.value
    const res = await postFile('/wms/report_form/freight_cross_export','post',obj,`尾程跨区明细-${query.value.dateShippingBegin ? query.value.dateShippingBegin : '' }~${query.value.dateShippingEnd ? query.value.dateShippingEnd : ''}.xlsx`)
    message.success('导出成功')
  }catch (e) {
    message.error(e);
  }finally {
    exportLoading.value = false;
  }
}
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"site,platform_freight_cross"
    })
    formItems.value[0].options = res.result.site
    formItems.value[1].options = res.result.platform_freight_cross

  }catch (e){
    console.log(e)
  }
}
const onSearch = async () => {
  if(!query.value.site){
    return message.error('请选择站点和平台')
  }
  await search()

}
const onReset = async () => {
  await reset()
}
const change = (data,text) => {
  let option = {
    title: {
      text: '整体跨区占比趋势',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      data: ['等级A', '等级B', '等级C', '等级D']
    },
    xAxis: {
      boundaryGap: false,
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100
    },
    tooltip: {
      trigger: 'axis'
    },
    series: []
  }
  option.xAxis.data = yearWeekList.value
  option.series = data
  option.title.text = text
  console.log(option)
  return option
}
watch(() => dataList.value, () => {
  outerRankInitChart.value()
  outerTruckRankInitChart.value()
})
onMounted(() => {
  init()
})
</script>
<style scoped>
.line-chart {
  width:90%;
  height:400px;
}
</style>
